<template>
  <div class="dashboard-container">
    <el-card>

      <!-- //^搜索框 -->
      <el-row>
        <el-col :span="8">
          <el-input v-model="userInfo.query" placeholder="请输入内容" clearable @clear="getOrderList" @keyup.enter.native="getOrderList">
            <template #append>
              <el-button icon="el-icon-search" @click="getOrderList" />
            </template>
          </el-input>
        </el-col>
      </el-row>

      <!-- //^订单列表数据 -->
      <el-table :data="orderList" stripe border>
        <el-table-column label="#" type="index" />
        <el-table-column prop="order_number" label="订单编号" />
        <el-table-column label="订单价格" prop="order_price" />
        <el-table-column label="是否付款" prop="pay_status">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.pay_status === '1'" type="success">已付款</el-tag>
            <el-tag v-else type="danger">未付款</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="是否发货" prop="is_send">
          <template slot-scope="scope">
            <template>
              {{ scope.row.is_send }}
            </template>
          </template>
        </el-table-column>
        <el-table-column label="下单时间" prop="create_time">
          <template slot-scope="scope">
            {{ scope.row.create_time | dateFormat }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template>
            <el-button type="primary" icon="el-icon-edit" size="mini" />
            <el-button
              type="success"
              icon="el-icon-location"
              size="mini"
            />
          </template>
        </el-table-column>
      </el-table>

      <!-- //^分页区域 -->
      <el-pagination :current-page="userInfo.pagenum" :page-sizes="[2, 5, 10, 15]" :page-size="userInfo.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />

    </el-card>
  </div>
</template>

<script>
import { getOrdersList } from '@/api/orders'

export default {
  components: {},
  data() {
    return {
      userInfo: {
        query: '',
        pagenum: 1,
        pagesize: 10
      },
      total: 0,
      // 订单数据列表
      orderList: []
    }
  },

  created() {
    this.getOrderList()
  },

  methods: {
    // ^获取订单数据列表
    async getOrderList() {
      try {
        const res = await getOrdersList(this.userInfo)
        // console.log(res)
        this.orderList = res.goods
        this.total = res.total
      } catch (err) {
        console.log(err)
      }
    },

    // ^分页区域操作
    // 监听pagesize改变的事件
    handleSizeChange(newSize) {
      this.userInfo.pagesize = newSize
      this.getOrderList()
    },
    // 监听页码值改变的事件
    handleCurrentChange(newPage) {
      this.userInfo.pagenum = newPage
      this.getOrderList()
    }
  }
}
</script>

<style scoped lang='less'>
.el-table {
  margin: 15px 0;
}
</style>
